<template>
	<div>
		<div class="swiper-container">
			<swiper :options="swiperOption" ref="mySwiper">
				<!-- 这部分放你要渲染的那些内容 -->
				<swiper-slide v-for="img in SowingsMap">
						<img :src="img" />
				</swiper-slide>
				<!-- 这是轮播的小圆点 -->
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import baseUrl from "@/assets/utils/config.js"
	import axios from 'axios'
	
	export default {
		name: 'sowingMap',
		components: {
			swiper,
			swiperSlide,
		},
		data() {
			return {
				baseUrl:baseUrl.baseurl,
				SowingsMap:[],
				swiperOption: {
					notNextTick: true,
					pagination: '.swiper-pagination',
					slidesPerView: 'auto',
					centeredSlides: true,
					paginationClickable: true,
					spaceBetween: 30,
					onSlideChangeEnd: swiper => {
						//这个位置放swiper的回调方法
						this.page = swiper.realIndex + 1;
						this.index = swiper.realIndex;
					}
				}

			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper;
			}
		},
		mounted() {
			//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
			this.swiper.slideTo(0, 0, false);
			var that = this;
			function getData() { 
				return axios.get(that.baseUrl)
			}
			
			axios.all([getData()])
				.then(axios.spread((GData) => {
					// 两个请求现在都执行完成
					console.log(GData.data.data);
					for(var i=0;i<GData.data.data.banner.length;i++){
						this.SowingsMap.push(GData.data.data.banner[i].image_url)
					}
					 
					
				}));
		}

	}
</script>

<style>
	.swiper-container{
		
		
	}
</style>